<template>
  <div>
    <button :class="type1(type)" :style="{backgroundColor:color1}" @click="btn">默认按钮</button>
  </div>
</template>

<script>
export default {
  props: ['type'],
  data () {
    return {
      color1: []
    }
  },

  computed: {
    type1   (t) {
      return function (t) {
        if (t === 'primary') {
          this.color1 = 'blue'
        } else if (t === 'success') {
          this.color1 = 'green'
        } else {
          this.color1 = 'white'
        }
      }
    }
  },

  methods: {
    btn () {
      console.log('默认')
      // alert('默认按钮')
      console.log(this.type)
    }
  }
}
</script>

<style scoped lang="less">
.def{
background-color: #fff;
}
.primary{
background-color: rgb(24, 160, 223);
color:#fff

}

      .danger{

         background: #ccc;
     }
</style>
